 
module Cms
  class YoutubeFragment < Fragment
    def initialize
    super()
    id = generate_id
    e :div, :id => id, :class => 'screen'
    e "", '
    <script type="text/javascript"> 
      // <![CDATA[

        function onYouTubePlayerReady(playerId) {
          ytplayer = document.getElementById(\''+id+'\');
          ytplayer.addEventListener("onError", console.log);
        }
        
        // functions for the api calls
        function loadNewVideo(id, startSeconds) {
          if (ytplayer) {
            ytplayer.loadVideoById(id, parseInt(startSeconds));
          }
        }

        function cueNewVideo(id, startSeconds) {
          if (ytplayer) {
            ytplayer.cueVideoById(id, startSeconds);
          } else {
            alert(\'no player\');
          }
        }



      YUI().use(\'event\', \'get\', \'node\', function(Y) {

        //if (typeof(ytplayer) == \'undefiend\') {
          var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
          var atts = { id: "'+id+'" };
          swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", 
                             "'+id+'", "400", "300", "8", null, null, params, atts);
        //}
        

        window.showVideo = function(id) {
          //console.log(id);
          loadNewVideo(id, 0);
        }

        window.showMyVideos = function(o) {
          //console.log(o);
          var entry = null, link = null, id = null;
          var results = Y.get(\'#v_results\');
          results.set(\'innerHTML\', \'\');
          for (var e in o.feed.entry) {
            entry = o.feed.entry[e];
            //console.log(entry.title[\'$t\'], entry.id[\'$t\']);
            link = Y.Node.create(\'<a href="\'+entry.link[0][\'href\']+\'">\'+entry.title[\'$t\']+\'</a>\');
            item = Y.Node.create(\'<p></p>\');
            item.appendChild(link);
            results.appendChild(item);
            id = entry.id[\'$t\'].split(\':\');
            id = id[(id.length-1)];
            link.on(\'click\', function(id) { return function(e) { showVideo(id); e.preventDefault(); }}(id));
          }
        }

        window.searchVideo = function(query) {
          var q = "http://gdata.youtube.com/feeds/api/videos?q="+escape(query)+"&alt=json-in-script&callback=showMyVideos&start-index=1&max-results=5&v=2";
          //console.log(q);
          Y.Get.script(q);
        }
      });

      //]]>
    </script>'
      e :br
      #e :input, :type => 'submit', :value => 'start', :onclick => 'cueNewVideo(\'uprjmoSMJ-o\', 0);'
      
      e :form, :onsubmit => 'try { searchVideo(document.getElementById(\'videoPhrase\').value); } catch (err) { console.log(err) } finally { return false; }' do
        e :input, :type => 'text', :value => 'worst song ever', :id => 'videoPhrase'
        e :input, :type => 'submit', :value => 'search'
      end
      
      e :div, :id => 'v_results', :style => 'border:1px solid #ddd; background-color:#eee; padding-left:1em'
      
    end
    
    def render
      context.page.link_js 'http://swfobject.googlecode.com/svn/tags/rc3/swfobject/src/swfobject.js'
      super()
    end
  end
end